<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Drosera Demo</title>
    <style type="text/css" media="all">
        body {
            background-color: white;
            background-image: url(drosera.png);
            background-repeat: no-repeat;
            background-position: 20px 20px;
            color: white;
            font-family: Verdana, Helvetica, sans-serif;
            font-size: 15px;
            line-height: 17px;
        }

        #main {
            position: absolute;
            background-color: #efefce;
            color: black;
            left: 225px;
            top: 120px;
            width: 400px;
            border: 1px solid #333;
            padding: 2em;
            -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.65);
        }

        h1 {
            text-align: center;
            line-height: 1em;
            margin-top: 0;
            color: rgba(0, 0, 0, 0.6);
        }
    </style>
    <script type="text/javascript" src="demo.js"></script>
    <script>
    function simpleFunction(event, x) {
        var test = 100;
        x = x + test;
        return x;
    }
    </script>
</head>
<body>
<div id="main">
<h1>Drosera Demo</h1>
Simple function: <button onclick="var y = simpleFunction(event, 20); alert(y);">Click Here</button>
<br><br>
Simple nested: <button onclick="quux()">Click Here</button>
<br><br>
Nested functions: <button onclick="nestedFunctions('abcde')">Click Here</button> <span id="rotResult"></span>
<br><br>
With statement: <button onclick="withTest()">Click Here</button>
<br><br>
Function factory: <button onclick="functionFactoryTest()">Click Here</button>
<br><br>
For Loop: <button onclick="loopsTest()">Click Here</button>
<br><br>
Exceptions: <button onclick="throwException()">Click Here</button>
<br><br>
Exception Soon: <button onclick="throwExceptionSoon()">Click Here</button>
</div>
</body>
</html>
